.logo{
    background: #000;
    line-height: 100px;
    .container{
        .logo-img{
            background: url("../images/logo.gif") no-repeat left center;
            width: 100px;
            height: 100px;
        }
        ul{
            padding: 0 50px;
            justify-content: center;
            :nth-of-type(1){
                a{
                    color: #fff;
                }
            }
            li{
                width: 125px;
                float: left;
                margin:0 10px;
                a{
                    &:hover{
                        color: #fff;
                    }
                }
            }
        }
        div{
            span{
            font-size: 17px;
            color: #fff;
            }
            button{
                margin-left: 30px;
                background: #000;
                width: 90px;
                height: 30px;
                border: 1px solid #a3a3a3;
                color: #ccc;
            }
        } 
    }
}
// logo end
.nav{
    ul{       
        :nth-of-type(1){
            a{
                color: #333;
            }
        }
        li{
            float: left;
            width: 80px;
            line-height: 90px;
            a{
                color: #666;
                &:hover{
                    color: #678ee7;
                }
            }
        }
        .drop{
            .drop-content{
                width: 100%;
                left: 0px;
                top: 193px;
                background: #ececec;
                z-index: 100;
                div{
                    line-height: 30px;
                    padding: 60px 0;                    
                    p{
                        color: red;
                    }
                }
            }
            &:hover .drop-content{
                display: block;
            }
        }
    }
    >div{
        float: right;
        padding-top: 45px;
        i{
            margin-right: 5px;           
        }
        span:not(.shopping_cart){
            display: inline-block;
            width: 22px;
            background: #666;
            color: #fff;
            border-radius: 11px;
            line-height: 22px;            
        }
        .shopping_cart{
            div{
                z-index: 100;
                color:#CCC;
                width: 335px;
                right: -7px;
                top: 40px;
                padding: 60px 10px;
                background: #fff;
                .icon-iconfontcart{
                    font-size: 80px;
                }
                h{
                    line-height: 30px;
                    font-size: 16px;
                    color: #333;
                }
                &::before{
                    content: "";
                    display: block;
                    border: 10px solid transparent;
                    border-bottom-color: #fff;
                    position: relative;
                    top: -80px;
                    right: -260px;
                    width: 0px;
                }

            }
            &:hover>div{
                display: block;
            }
        }
    }
}
// display-start
.main{
    >.banner{margin-top: 0px;}
    >div{
        margin-top: 30px;
        overflow: hidden;
        border-radius: 7px;
        margin-bottom: -1px;
        margin-right: -1px;
        border: 1px solid #E6e6e6;
        background: #fff; 
        >p{
            line-height: 60px;
            font-size: 16px;
            color: #666666;
            padding-left: 40px;
            background: #fafafa;
            border-bottom: 1px solid #ececec;
        }
        h4{
            font-size: 14px;
            color: #333;
            line-height: 20px;
        }
    }
}
.hot,.picked,.brand,.trends{
    >div{
        padding: 17px 0;
    }
}
.hot,.picked,.brand{
    div{
        .price{
            height: 40px;
            color: red;
        }
        .details{
            height: 40px;
            display: none;
            button{
                width: 100px;
                height: 30px;                
                border-radius: 5px;                
            }
            button:first-child{
                background: #ccc;
                border: 1px solid #999;                
            }
            button{
                background: #678ee7;
                color: #fff;
            }
        }
        &:hover .price{
            display: none;
        }
        &:hover .details{
            display:block;
        }        
    }
}
.picked-wrap,.brand-wrap{
    padding:0 0 !important;
    overflow: hidden;
    height: 427.2px;
}
.change{
    padding: 20px 0;
    height:60px;
    ul{ 
        display: flex;
        justify-content:center;
        .hong{
            width: 15px;
            height: 15px;
            border-radius:8px; 
            border: 1px solid transparent;
            margin: 0 5px;
            div{
                width: 12px;
                height: 12px;
                border-radius: 6px;
                overflow: hidden;
                position: relative;
                top: 2px;
                left: 2px;
            }            
            &:hover{
                border:1px solid #999 !important;                
            }
        }
        .choice{
            border:1px solid #999 !important;
        }
    }
}
.banner{
    height: 500px;
    margin-top: 0px;
    }
.display{
    overflow: hidden;
    div{
        height: 197px;
        &:nth-of-type(1) {
            background: url("../images/4-1.jpg")no-repeat center center;
        } 
        &:nth-of-type(2) {
            background: url("../images/4-2.jpg")no-repeat center center;
        }  
        &:nth-of-type(3) {
            background: url("../images/4-3.jpg")no-repeat center center;
        }  
        &:nth-of-type(4) {
            background: url("../images/4-4.jpg")no-repeat center center;
        } 
    }        
}
.trends{
    overflow: hidden;
    div{
        height: 197px;
        &:nth-of-type(1) {
            background: url("../images/8-1.jpg")no-repeat center center;
        } 
        &:nth-of-type(2) {
            background: url("../images/8-2.jpg")no-repeat center center;
        }  
        &:nth-of-type(3) {
            background: url("../images/8-3.jpg")no-repeat center center;
        }  
        &:nth-of-type(4) {
            background: url("../images/8-4.jpg")no-repeat center center;
        } 
    } 
    }
.apply,.forum{
    button{
        width: 100px;
        height: 35px;
        right: 30px;
        top: 13px;
        background: #fefefe;
        border-radius: 5px;
        border: 1px solid #e6e6e6;
    } 
    >div{
        &:hover .apply-top{
            display: none;
        }
        &:hover .apply-button{
            display: block;
        }
    }
    a{
        line-height: 30px;
    }
}
.apply{
    >div{  
        height: 355px;
        >div{
            padding: 50px 35px;
            width:100%;
            top: 0px;
            left: 0px;
            >img{
                margin: 40px 0 ;
            }
            p{
                height: 50px;
            }
            a{
                color: #678ee7;
                &:hover{
                    color:#0066ff;
                }
            }
            .system{
                img{
                    margin: 20px 0 0;
                }
            }
        }
        >.apply-button{
            p{
                height: 25px;
                color: #666;
            }
        }
    }
}
.forum{
    >div{
        padding: 30px ;
        div{
            border-radius: 5px;
            overflow: hidden;
            width: 240px;
            height: 155px;
        }
        h4{
            margin-top: 30px;
            height: 45px;
        }
        p{
            height: 40px;
        }
        a{
            color: #0066ff;
        }
    }
}
.foot{
    background: #fafafa;
    margin-top: 30px;
    ul{
        margin: 50px 90px 50px 0;
        float: left;
        line-height: 22px;
        ol{
            color: #000;
        }
    }
    .help{
        margin: 60px 0 0;
        float:right;
        text-align: right;
        h1{
            color: #646464;
        }
        button{
            margin-top: 5px;
            width: 120px;
            height: 35px;
            background: #fafafa;
            border: 1px solid #ccc;
            color: #0066ff;
            i{
                top: 1px;
                left: 0px;
            }
        } 
    }
    .footer{
        height: 125px;
        border-top: 1px solid #ccc;
        padding: 50px 0;
        p{
            color: #333;
            line-height: 25px;
            a{
                border-left: 1px solid #ccc;
                color: #678ee7;
                &:hover{
                    color: #0066ff;
                }
            }
        }
        div{
            right: 30px;
            top: 20px;
            select{
                width: 80px;
                border: 0px;
                background: #fafafa;
            }
        }
        option{
            background:url("../images/language.png" )no-repeat center 20%;
        }
    }
}